<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <style type="text/css">
        span{
            color: red;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <script type="text/javascript">
         /*
         (1)用户名不能为空
        (2)用户名必须在6-14位之间。
        (3)用户名只能有数字和字母组成，不能含有其它符号(正则表达式)
        (4)密码和确认密码一致，邮箱地址合法。
        (5)统一失去焦点验证
        (6)错误提示信息统一 在span标签中提示，并且要求字体12号，红色。
        (7)文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value
        (8)最终表单中所有项均合法方可提交
          */
         window.onload = function () {
             //获取username后面的span标签
             var usernameErrorSpan = document.getElementById("usernameError");
             //给用户名文本框绑定blur事件
             var usernameElt = document.getElementById("username");
             usernameElt.onblur = function () {
                 //获取用户名
                 var username = usernameElt.value.trim();//去除前后空白
                 //判断用户名是否为空
                 if(username.length == 0){//表示空字符串
                     usernameErrorSpan.innerText = "用户名不能为空！"
                 }else { //到这里用户名不为空，判断长度，控制在6-14
                     if (username.length<6 || username.length >= 14){//不合法
                         usernameErrorSpan.innerText = "用户名长度需要在6-14之间"
                     }else {//合法，继续判断是否有其他特殊符号组成
                         var regExp = /^[A-za-z0-9]$/;
                         var ok = regExp.test(username);
                         if(ok){//合法

                         }else {//不合法
                             usernameErrorSpan.innerText = "用户名只能由字母和数字组成！"

                         }
                     }
                 }
             }

             //给username这个文本框绑定焦点事件，当光标移出的时候提示用户名错误，移回来的时候提示消失，并且清空文本框
             usernameElt.onfocus = function () {

                 //清空非法value
                 if(usernameErrorSpan.value != ""){//不合法
                     //清空
                     usernameElt.value= "";
                 }
                 //清空span
                 usernameErrorSpan.innerText = "";
             }

             //获取密码错误提示的Span
             var userpswErrorSpan = document.getElementById("pswError");
             //获取确认密码框对象，绑定blur事件
             var userpsw1Elt = document.getElementById("userpsw1");
             //获取密码框对象
             var userpswElt = document.getElementById("userpsw");

             userpsw1Elt.onblur = function () {
                 //获得两个框的密码
                 var userpsw = userpswElt.value;
                 var userpsw1 = userpsw1Elt.value;
                 if(userpsw == userpsw1){//密码一致

                 }else {//密码不一致
                     userpswErrorSpan.innerText = "两次输入的密码不一致";
                 }


             }

             userpswElt.onblur = function () {
                 //有错误则鼠标移回去的时候清空两个密码框
                 if( userpswErrorSpan.innerText != ""){
                     userpswElt.value = "";
                     userpsw1Elt.value = "";
                     userpswErrorSpan.innerText = "";

                 }else {

                 }
             }

             //给Email绑定blur事件
             var emailElt = document.getElementById("email");
             //获取Email的span
             var emailErrorSpan = document.getElementById("emailError")

             //绑定blur事件
             emailElt.onblur = function () {
                 //获取email
                 var email = emailElt.value;
                 //编写email的正则
                 var emailRegExp =/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/；
                 var ok = emailRegExp.test(email);

                 if(ok){
                     //合法
                 }else {
                     //不合法
                     //emailErrorSpan.value = "不合法"
                 }
             }

            //给鼠标绑定鼠标单击事件
             var submtiBtnElt = document.getElementById("submitBt");
             submtiBtnElt.onclick = function () {
                 //当所有表单合法时提交
                 if(合法){
                     //获取表单对象
                     var userformElt = document.getElementById("userform");
                     //提交表单
                     userformElt.submit();
                 }
             }

         }
    </script>

    <!--表单提交一般使用post而不是使用get 但是为了测试方便 这里使用get-->
    <form id= "userform" action="hettp://localhost8080/jd/save" method="get"><br>
        用户名<input type="text" name="username" id = 'username'><span id="usernameError"></span><br>
        密码<input type="text" name="userpsw" id="userpsw"><span id="pswError"></span><br>
        确认密码<input type="text" name="userpsw1" id="userpsw1"><br>
        邮箱<input type="text" name="enmail" id="email"><span id="emailError"></span><br>
        <input type="button" value="注册" id="submitBt"><br>
        <input type="reset" value="重置">
    </form>
</body>
</html>